import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

/* Layout */
import Layout from "@/layout";

// 动态路由：需要做权限控制，更具权限的不同，数量上变化
// 静态路由：不需要做权限控制，每一个用户都可以看到，初始化一次即可
export const routes = [
  {
    path: "/login",
    component: () => import("@/views/Login/index"),
    hidden: true,
  },
  {
    path: "/",
    component: Layout,
    redirect: "/workbench",
  },
  {
    path: "/workbench",
    component: Layout,
    children: [
      {
        path: "",
        component: () => import("@/views/Workbench/index"),
        meta: { title: "工作台", icon: "el-icon-data-board" },
      },
    ],
  },
  {
    path: "/addEnterprise",
    component: () => import("@/views/Park/Enterprise/addEnterprise"),
  },
  {
    path: "/enterpriseDetail/:id",
    component: () => import("@/views/Park/Enterprise/enterpriseDetail.vue"),
  },
  {
    path: "/car/addMonthCard",
    component: () => import("@/views/Car/CarCard/addMonthCard.vue"),
  },
  {
    path: "/sys/addRole",
    component: () => import("@/views/System/Role/addRole.vue"),
  },
  {
    path: "/404",
    component: () => import("@/views/404"),
    hidden: true,
  },
];

// 创建Router实例
const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    // hash模式       特点：#号来连接地址和路由  #后面的路径不会请求到服务端，不会出现404
    // history模式    特点：/来连接地址和路由  /后面的路径会请求到服务端。
    // 但是项目打包完后只有index.html和favicon.ico  所以会出现404
    // 总结：hash模式在任何情况下都不会出现问题
    // history在开发模式下没有404问题，是因为webpack提前把404问题解决了

    // 解决history模式线上 404 问题
    // 官网解决方案：https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
    mode: "history",
    scrollBehavior: () => ({ y: 0 }),
    routes: routes,
  });

const router = createRouter();

// 重置路由方法[不是官方方法]
export function resetRouter() {
  // 得到一个全新的router实例对象
  const newRouter = createRouter();
  // 使用新的路由记录覆盖掉老的路由记录
  router.matcher = newRouter.matcher;
}

export default router;
